<!DOCTYPE>
<html >
	<head>
		<title>SAP Feed</title>
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
			<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
			<script src="http://malsup.github.com/jquery.blockUI.js"></script>
			<script src="jquery.url.js"></script>
			<script src="jquery.scrollTo-min.js"></script>
			<link rel="stylesheet" type="text/css" href="jquery/jScrollbar.jquery.css" media="screen" />
			<script src="jquery/jquery-mousewheel.js" type="text/javascript"></script>
			<script src="jquery/jScrollbar.jquery.js" type="text/javascript"></script>
			<script src="smoothie.js" type="text/javascript"></script>
			<script src="highcharts.js" type="text/javascript"></script>
			<script src="jquery.qtip.js" type="text/javascript"></script>
			<link rel="stylesheet" type="text/css" href="jquery.qtip.css" media="screen" />
		<script>
		 var dataSet = [];
		 var descMap = [];
		 
		 var chart = null;
		 var currentIntervalID = null;
		 var requestedDataSetID = null;
		 var requestedPubDataSetID = null;
		 var backCSS = { backgroundColor : "#9D9FA4" };
		 var loginCSS = { float :'left', border: '5px solid rgb(165,198,255)', backgroundColor: '#FFFFFF', opacity: '1', '-moz-border-radius-topleft': '30px',
				    '-moz-border-radius-bottomleft': '30px',
				    '-webkit-border-top-left-radius': '30px',
				    '-moz-border-radius-bottomright': '30px',
				    '-webkit-border-top-right-radius': '30px',
				     '-webkit-border-bottom-right-radius': '30px',
				    '-webkit-border-bottom-left-radius': '30px',
				   	padding : '25px 45px', width : '300px'};
		$(document).ready(function () {			
			
			function createToolTip( ) {
				var style_class = "ui-tooltip-rounded ";
				
			/*	if( type == "green" ) {
					style_class += "ui-tooltip-green";
				} else {
					style_class += "ui-tooltip-red";
				}*/
				
				$("#suButton").qtip({
					 content: {
						 text : $("#toolContent"),
						 title : {
							 text : "Confirm"
						 }
					 },
					 position: {
						my : "top right",
						at : "bottom right"
			         },
			         style: {
			        	 tip : {
			        		 corner : "top right"
			        	 },
			        	 width: 600,
			             classes: "ui-tooltip-dark ui-tooltip-rounded"
			         },
			         show: {
			        	 event : "click",
			        	 effect : function(offset) {
			        		 $(this).slideDown(200);
			        	 }
			         },
			         hide: {
			        	 target : $("#confirm_ok,#confirm_cancel"),
			        	 event : "click",
			        	 effect : function (offset ){
			        		 $(this).slideUp(500);
			        	 }
			         }
				});
			}
			
			function clearToolTip() {
				$("#suButton").removeData('qtip');
			}
			 function clearChart() {
			    	var dataSeries = chart.series[0].data;
			    	while ( dataSeries.length > 0 ) {
			    		var current = dataSeries[0];
			    		current.remove(false,true);
			    	}
			    	chart.redraw();
			    }
			 function requestData() {
				 if( isCurrentUserSet && isPanelOpen ) {
					 $.post("ConsumptionInfo", { dataSet: requestedDataSetID }, function (response) {
							/**
							 * Display the stream statistics i.e quantity received over an interval
							 */
							//	 consumptionTimeSeries.append(new Date().getTime(), response);
							// alert(response);
						 var series = chart.series[0],
			             shift = series.data.length > 10; // shift if the series is longer than 20

				         // add the point
				         var x = (new Date()).getTime(),
				         	y = response;
				         chart.series[0].addPoint([x,y], true, shift);
				         
				         // call it again after 5 seconds
				         //setTimeout(requestData, 5000); 
						 }, 'json');
					 
					 var nasdsa = 3434;
					 $.post("GetTotal", {dataSet: requestedDataSetID}, function(response){
						// alert(response);
						 $("#userBill").html(response*0.001);
						 $("#messagesLeft").html(10000-response);
					 }, 'json' );
				 }
			 }
			//alert('hi');
			//var error = $.url().attr("error");
			function hideAll() {
				$("#login").hide();
				$("#signup").hide();
				$("#header").hide();
				$("#wrapper").hide();
				$("#userid").hide();
				$("#subPanel").hide();
				$("#pubPanel").hide();
				$("#addDataSet").hide();
				$("#toolContent").hide();
			}
			
			hideAll();
			function blockWithLogin() {
				$.blockUI({ message: $('#login'),
					overlayCSS : backCSS,
					
					css: loginCSS }); 
			}
			$("#createUser").on("click", function() {
				var user_name, user_pass;
				if($("#p1").val() == $("#p2").val()) {
					user_name = $("#username").val();
					user_pass = $("#p1").val();
					$.post("Signup", {username: user_name, password:user_pass}, function(response) {
						//alert(response);
						$.unblockUI({ 
							onUnblock: function() {
								blockWithLogin();
							} 
						});
					});
				} else {
					alert("Passwords do not match. Try again!");
					$("#p1").val("");
					$("#p2").val("");
				}
			});
			function unblockLogin() {
				$.unblockUI({ 
					onUnblock: function() {
						$("#header").show();
						$("#wrapper").show();
						refreshList();
					} 
				});
			}
			//debugger;
			blockWithLogin();
			
			$("#login #submit").click(function(){
				var userName, passWord;
				userName = $("#l_username").val();
				passWord = $("#l_password").val();
				
				$.post("Login",{ username : userName, password : passWord}, function (response) {
					if(response == "false")
						unblockLogin();
				},'json');
			});
			
			function refreshPanel( container ) {
				if(currentIntervalID != null)
					clearInterval(currentIntervalID);
				var innerContent = "<h1>Details</h1><br />";
				//innerContent += "<p>";
				var val = getDataSetID(container.html());
				var currentDescription = descMap[val].description;
				//innerContent += "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mauris risus, hendrerit rhoncus faucibus quis, posuere in tortor. Ut varius, leo at vulputate tempor, neque arcu faucibus metus, nec accumsan justo felis vitae tellus. Morbi gravida fringilla diam, quis cursus massa ultricies ut. Quisque laoreet faucibus nisi, non faucibus nibh porttitor vitae. Phasellus aliquet ante vitae velit pellentesque sodales. Donec porta volutpat congue. Pellentesque ornare egestas mauris, a pretium mi sodales suscipit. Sed lobortis consequat euismod. Quisque aliquet dapibus nibh, sed sodales mauris interdum at. Donec vitae est a nulla aliquet ornare sit amet eget ligula. Vivamus imperdiet ultrices tempus. Donec interdum, diam quis rutrum dignissim, metus lorem varius nulla, sed feugiat nisi neque quis neque. Integer congue, ipsum vitae fermentum egestas, dolor orci scelerisque nibh, eget mollis mi augue a ipsum.Quisque venenatis facilisis ante non lobortis. Suspendisse ornare condimentum dictum. Maecenas posuere, ipsum in interdum mattis, purus est tempus quam, ac rhoncus nulla orci nec arcu. Nulla consectetur, turpis id pharetra ultrices, risus nisi dictum nunc, at sodales risus ipsum vitae neque. Vivamus pharetra dictum lacus, quis viverra leo lobortis non. Vestibulum velit risus, venenatis sit amet suscipit at, faucibus a elit. Fusce ac lacus vel mauris laoreet bibendum. Etiam ligula nunc, adipiscing in congue eu, vehicula non turpis. Vivamus id malesuada augue. Vestibulum eros nisi, lacinia suscipit vehicula vel, gravida sit amet magna. Mauris lacinia gravida velit, vel venenatis tellus dapibus a. Sed congue turpis nec tellus faucibus sagittis.</p>";
				
				innerContent += "<table class=\"stats\"><tr><td>Description</td><td>" + currentDescription + "</td></tr><tr><td>Price</td><td>$10 per 10000 messages</td></tr>";
				if( container.hasClass('userSet')) {
					innerContent +="<tr><td>Current bill</td><td id=\"userBill\"></td></tr><tr><td>Messages Left</td><td id=\"messagesLeft\"></td></tr></table>";
					currentAction = "unsub";
					requestedDataSetID = val;
					isCurrentUserSet = true;
					innerContent =  "<div id=\"mycanvas\"></div>" + innerContent ;
					$(".jScrollbar_mask").html(innerContent);
					$('#suButton').html("Unsubscribe");
					$("#suButton").addClass("unsub");
					$("#suButton").removeClass("sub");
					
					// scrollbars created here 
					//alert($(".jScrollbar4").height());
					//alert($('.jScrollbar_mask').innerHeight());
					chart = {};
					chart = new Highcharts.Chart({
				        chart: {
				            renderTo: 'mycanvas',
				            defaultSeriesType: 'spline',
				            height: '200',
				            width:  '500',
				            events: {
				                load: function() {
				                	currentIntervalID = setInterval(requestData, 2500);
				                }
				            }
				        },
				        title: {
				            text: 'User Data Consumption'
				        },
				        xAxis: {
				            type: 'datetime',
				            tickPixelInterval: 150,
				            maxZoom: 20 * 1000
				        },
				        yAxis: {
				            minPadding: 0.2,
				            maxPadding: 0.2,
				            title: {
				                text: 'Number of messages',
				                margin: 80
				            }
				        },
				        series: [{
				            name: 'Average Consumption',
				            data: []
				        }]
				    });
				//	debugger;
					/*	if(confirm("Unsubscribe from " + val + " ?")) {
							$(this).addClass("dataSet");//.removeClass("userSet");
							$(this).removeClass('userSet');
							
							//Unsubscribe from the data set
							
							$.post("Unsubscribe", { dataSet: val});
						}	*/
					/*	setInterval(function() { 
							 $.post("ConsumptionInfo", { dataSet: "1" }, function (response) {
								/**
								 * Display the stream statistics i.e quantity received over an interval
								 *
								 consumptionTimeSeries.append(new Date().getTime(), response);
								// alert(response);
							//	$(".jScrollbar4").jScrollbar();
							 }, 'json');
						 },5000);*/
						
					} else {
						innerContent += "</table>";
						currentAction = "sub";
						$(".jScrollbar_mask").html(innerContent);
						isCurrentUserSet = false;
						requestedDataSetID = null;
						
						$('#suButton').html("Subscribe");
						$("#suButton").addClass("sub");
						$("#suButton").removeClass("unsub");
						if(chart != null)
							clearChart();
					/*	if(confirm("Subscribe to " + val + " ?")) {
							$(this).addClass("userSet");//removeClass("dataSet");
							$(this).removeClass('dataSet');
							
							//Subscribe to the data set							
							$.post("Subscribe", { dataSet: val});
						}	*/
						
						/**
						 * Display the number of subscribers in real time 
						 */
						
					}		
				$(".jScrollbar4").jScrollbar();
				$("#subDesc").html(descMap[val].name);
				clearToolTip();
				createToolTip();
			}
			var pubChart = null;
			function requestPubData()
			{
				if( isPubPanelOpen ) {
					 $.post("PublishInfo", { dataSet: requestedPubDataSetID }, function (response) {
							/**
							 * Display the stream statistics i.e quantity received over an interval
							 */
							//	 consumptionTimeSeries.append(new Date().getTime(), response);
							// alert(response);
						 var series = pubChart.series[0],
			             shift = series.data.length > 10; // shift if the series is longer than 20

				         // add the point
				         var x = (new Date()).getTime(),
				         	y = response;
				         pubChart.series[0].addPoint([x,y], true, shift);
				         
				         // call it again after 5 seconds
				         //setTimeout(requestData, 5000); 
						 }, 'json');
					 
					 var nasdsa = 3434;
					 $.post("GetTotalPublished", {dataSet: requestedPubDataSetID}, function(response){
						// alert(response);
						//Expected Earnings
						$("#userEarnings").html(0.001*response);
						$("#messagesPublished").html(response);
						//Messages published
					 }, 'json' );
				 }
			}
			
			var currentPubIntervalID = null;
			function refreshPubPanel( container ) {
				if(currentPubIntervalID != null)
					clearInterval(currentPubIntervalID);
				var innerContent = "<h1>Statistics</h1><br />";
				
				var val = getDataSetID(container.html());
				var currentDescription = descMap[val].description;
			//	innerContent += "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mauris risus, hendrerit rhoncus faucibus quis, posuere in tortor. Ut varius, leo at vulputate tempor, neque arcu faucibus metus, nec accumsan justo felis vitae tellus. Morbi gravida fringilla diam, quis cursus massa ultricies ut. Quisque laoreet faucibus nisi, non faucibus nibh porttitor vitae. Phasellus aliquet ante vitae velit pellentesque sodales. Donec porta volutpat congue. Pellentesque ornare egestas mauris, a pretium mi sodales suscipit. Sed lobortis consequat euismod. Quisque aliquet dapibus nibh, sed sodales mauris interdum at. Donec vitae est a nulla aliquet ornare sit amet eget ligula. Vivamus imperdiet ultrices tempus. Donec interdum, diam quis rutrum dignissim, metus lorem varius nulla, sed feugiat nisi neque quis neque. Integer congue, ipsum vitae fermentum egestas, dolor orci scelerisque nibh, eget mollis mi augue a ipsum.Quisque venenatis facilisis ante non lobortis. Suspendisse ornare condimentum dictum. Maecenas posuere, ipsum in interdum mattis, purus est tempus quam, ac rhoncus nulla orci nec arcu. Nulla consectetur, turpis id pharetra ultrices, risus nisi dictum nunc, at sodales risus ipsum vitae neque. Vivamus pharetra dictum lacus, quis viverra leo lobortis non. Vestibulum velit risus, venenatis sit amet suscipit at, faucibus a elit. Fusce ac lacus vel mauris laoreet bibendum. Etiam ligula nunc, adipiscing in congue eu, vehicula non turpis. Vivamus id malesuada augue. Vestibulum eros nisi, lacinia suscipit vehicula vel, gravida sit amet magna. Mauris lacinia gravida velit, vel venenatis tellus dapibus a. Sed congue turpis nec tellus faucibus sagittis.</p>";
				innerContent += "<table class=\"stats\"><tr><td>Description</td><td>" + currentDescription + "</td></tr><tr><td>Price</td><td>$10 per 10000 messages</td></tr><tr><td>Expected Earnings</td><td id=\"userEarnings\"></td></tr><tr><td>Messages Published</td><td id=\"messagesPublished\"></td></tr></table>"

				pubChart = {};
				pubChart = new Highcharts.Chart({
			        chart: {
			            renderTo: 'pubCanvas',
			            defaultSeriesType: 'spline',
			            height: '200',
			            width:  '500',
			            events: {
			                load: function() {
			                	currentPubIntervalID = setInterval(requestPubData, 2500);
			                }
			            }
			        },
			        title: {
			            text: 'Publisher Statistics'
			        },
			        xAxis: {
			            type: 'datetime',
			            tickPixelInterval: 150,
			            maxZoom: 20 * 1000
			        },
			        yAxis: {
			            minPadding: 0.2,
			            maxPadding: 0.2,
			            title: {
			                text: 'Number of messages',
			                margin: 80
			            }
			        },
			        series: [{
			            name: 'Average Messages Published',
			            data: []
			        }]
			    });
			//	innerContent += ""
				//$(".jScrollbar4").jScrollbar();
				$("#pubDesc").html(descMap[val].name);
				$("#pubSubContent").html(innerContent);
			}
			$("#pubK").on("click", function() {
				$("#pubPanel").hide();
				$("#pubContent").animate({ width: '40%'},{ duration: 200, queue: false });
				$("#innerPub").animate({ width: '100%'},{ duration: 200, queue: false });
				isPubPanelOpen = false;
			});
			$("#subK").on("click", function() {
				$("#subPanel").hide();
				$("#subContent").animate({ width: '40%'},{ duration: 200, queue: false });
				$("#innerSub").animate({ width: '100%'},{ duration: 200, queue: false });
				currentPanel = null;
				isPanelOpen = false;
				currentIDOnPanel = null;
			});
			$("#newDataSet").on("click", function() {
				$("#dataset_name").val("");
				$("#dataset_desc").val("");
				$.blockUI({ message: $('#addDataSet'),
					overlayCSS : backCSS,
					
					css: loginCSS }); 
			});
			$("#cancelDataSet").on("click", function() {
				$.unblockUI({ 
					onUnblock: function() {
					//	$("#header").show();
					//	$("#wrapper").show();
						refreshPubList();
					} 
				});
			});
			$("#createDataSet").on("click", function() {
				var dset = $("#dataset_name").val();
				var dset_desc = $("#dataset_desc").val();
				$.post("AddData", { dataSet : dset, dataSetDesc : dset_desc}, function(response) {
				//	alert(response);
					$.unblockUI({ 
						onUnblock: function() {
						//	$("#header").show();
						//	$("#wrapper").show();
							refreshPubList();
						} 
					});
				},'json' );
			});
			$("#goToSignUp").on("click", function() {
				$.unblockUI({ 
					onUnblock: function() {
						$.blockUI({ message: $('#signup'),
							overlayCSS : backCSS,
							
							css: loginCSS });
					} 
				});
			});
			$("#goToLogin").on("click", function() {
				$.unblockUI({ 
					onUnblock: function() {
						$.blockUI({ message: $('#login'),
							overlayCSS : backCSS,
							
							css: loginCSS });
					} 
				});
			});
			var isPubPanelOpen = false;
			var lastPubClicked = null, currentPubClicked;
			var currentIDOnPubPanel = null;
			var currentPubPanel = null;
			$("#publist").on("click","tr", function() {
				var isHeader = $(this).hasClass("columnHead");				
				if(!isHeader) { 
					var val = getDataSetID($(this).html());
					currentPubClicked = val;
					isPubPanelOpen = true;
					$("#pubContent").animate({ width: '80%'},{ duration: 200, queue: false });
					$("#innerPub").animate({ width: '45%'},{ duration: 200, queue: false });
					$("#pubPanel").show();
					
					currentPubPanel = {};
					currentPubPanel['id'] = val;
					currentPubPanel['obj'] = $(this);
					currentPubPanel['isOpen'] = true;
					
					currentIDOnPubPanel = val;
					if(lastPubClicked != currentPubClicked) {
						refreshPubPanel( currentPubPanel.obj);
					}
					lastPubClicked = currentPubClicked;
				}
			});
			var isPanelOpen = false;
			var isCurrentUserSet = false;
			var lastClicked = null, currentClicked;
			var scrollPanel;
			var currentIDOnPanel = null;
			var currentAction = null;
			var currentPanel = null;
			$("#dslist").on("click","tr", function() {
				
				var isHeader = $(this).hasClass("columnHead");				
				if(!isHeader) {
					var val = getDataSetID($(this).html());
					currentClicked = val;
					
				/*	if(isPanelOpen && (currentClicked == lastClicked )) {
						$("#subPanel").hide();
						$("#subContent").animate({ width: '40%'},{ duration: 200, queue: false });
						isPanelOpen = false;
						currentIDOnPanel = null;
					} else {*/
					
						$("#subContent").animate({ width: '80%'},{ duration: 200, queue: false });
						$("#innerSub").animate({ width: '45%'},{ duration: 200, queue: false });
						$("#subPanel").show();
						currentPanel = {};
						currentPanel['id'] = val;
						currentPanel['obj'] = $(this);
						currentPanel['isOpen'] = true;
						currentPanel['isSubscribed'] = $(this).hasClass('userSet'); 
						
						isPanelOpen = true;
						currentIDOnPanel = val;
						
						/**
						*
						*	Show corresponding data on this panel
						*	for the dataSet / userSet
						*
						*/
						if(lastClicked != currentClicked) {
							refreshPanel( currentPanel.obj);
						}
				//	}
					lastClicked = currentClicked;
				}	
			});
			$("#toolContent").on("click", "#confirm_ok", function () {
				var id = currentPanel['id'],
					isSubscribed = currentPanel['isSubscribed'],
					container = currentPanel['obj'];
				if( isSubscribed ) {
					$.post('Unsubscribe', {dataSet : id}, function(response) {
						//alert(response);
						container.addClass('dataSet');
						container.removeClass('userSet');
						$('#suButton').addClass('sub');
						$('#suButton').removeClass('unsub');
						$('#suButton').html('Subscribe');
						currentPanel['isSubscribed'] = false;	
						refreshPanel(container);
						refreshList();
					});
				} else if(currentAction == "sub") {
					$.post('Subscribe', {dataSet : id}, function(response) {
					//	alert(response);
						container.addClass('userSet');
						container.removeClass('dataSet');
						$('#suButton').addClass('unsub');
						$('#suButton').removeClass('sub');
						$('#suButton').html('Unsubscribe');
						currentPanel['isSubscribed'] = true;
						refreshPanel(container);
						refreshList();
					});
				}
				
			});
			
			$("#dslist").on("mouseenter","tr",function(event) {
				event.stopPropagation();
				var data =  $(this).html();
		        var desc = descMap[getDataSetID(data)];
				/**/
				/*if( $(this).hasClass('userSet')) {
					$(this).animate( { 'background-color': "#339933" },150);
				} else if ($(this).hasClass('dataSet')) {
					$(this).animate( { 'background-color': "#CC0000" },150);
				}*/						
			});
			$("#dslist").on("mouseleave","tr",function(event) {
				event.stopPropagation();
				/*if( $(this).hasClass('userSet')) {
					$(this).animate( { 'background-color': "#52C954" },150, function() {
						
					});
				} else if ($(this).hasClass('dataSet')) {
					$(this).animate( { 'background-color': "#CA5854" },150);
				}*/
			});
			function refreshList() {
				$.post('GetData', function(response) {
				    //Update the lists and display them
				 	var userSet = [];
				   
				   dataSet = response[0];
				    userSet = response[1];
			//	    alert('Reached');
				    var dataListLength = dataSet.length,
				    	i, content = "<tr class=\"columnHead\"><th class=\"idColumn\">ID</th><th class=\"nameColumn\">Name</th><th class=\"statusColumn\">Subscribed ?</th></tr>";
				   
				    for(i=0; i<dataListLength; i++) {
				    	var current = dataSet[i];
				    	
				    	if($.inArray(current.id,userSet) >= 0) {
				    		content +="<tr class=\"userSet\"><td>" + current.id + "</td><td class=\"tdchild\">" + current.name + "</td><td> Yes </td></tr>";
				    	} else {
				    		content +="<tr class=\"dataSet\"><td>" + current.id + "</td><td class=\"tdchild\">" + current.name + "</td><td> No </td></tr>";
				    	}
				    	descMap[current.id] = {};
				    	descMap[current.id].name = current.name;
				    	descMap[current.id].description =current.description;
				    	
				    }
				    /*$('#dslist *').each( function (index) {
				    	$(this).qtip({
					    	content :  descMap[index]
					    });
				    });*/
				    
				    $("#dslist").html(content);
				    
				}, 'json');
			}
			
			function refreshPubList() {
				$.post('GetPubData', function(response) {
					var pubList = [];
					pubList = response;
					//alert(response[0]);
					if(pubList != null) {
						var i, pubListLength = pubList.length, content;
						
						content = "<tr class=\"columnHead\"><th class=\"idColumn\">DataSet ID</th><th class=\"nameColumn\">Dataset Name</th><th class=\"statusColumn\">Number of Subscribers</th></tr>";
						for(i=0;i<pubListLength;i++) {
							var currentDataSet = pubList[i];
							var current_id = currentDataSet[0];
							var current_name = currentDataSet[1];
							var current_consumers = currentDataSet[2];
							content += "<tr><td>" + current_id + "</td><td>" + current_name + "</td><td>" + current_consumers + "</td></tr>";
						}
						
						$("#publist").html(content);
					}			
				}, 'json');
			}
			
			function getDataSetID( data ) {
				var firstIndex, lastIndex;
				var subString;
				firstIndex = data.indexOf('>');
				firstIndex++;
					
				lastIndex = data.indexOf('</');
				
				subString = data.substring(firstIndex,lastIndex);
				
				return subString;
			}
			/*$("#suButton").on("click", function() {
				var classOfButton = $(this).attr("class");
				alert("Hey!");
				if(classOfButton == "sub") {
				///	currentIDOnPanel
					
				// confirm with user and subscribe to the data set
				} else if (classOfButton == "unsub") {
				// confirm with user and unsubscribe from data set
				} else {
					alert("Error occured");
				}
			});*/
			var previousSelected = $("#menu:first-child li:first-child a");
			$("#menu:first-child li:first-child a").addClass("selected");
			$("#menu a").click( function() {
				var current = $(this);
				if( current.attr("href") != previousSelected.attr("href") ) {
					var currentSelection = $(this).attr("href");
					///if(previousSelected != null)
					//	alert(previousSelected);
					$("#wrapper").scrollTo(currentSelection,800);
					if(currentSelection == "#box1") {
						refreshList();
					} else if( currentSelection == "#box2") {
						refreshPubList();
					}
					$(this).addClass("selected");
					if(previousSelected != null) {
						previousSelected.removeClass("selected");	
					}
					previousSelected = $(this);
				}	
			});
			
			
			$(".inner").click( function (){
			//	$(".content").animate({ width: '80%'},{ duration: 200, queue: false });
			//	$(".panel").show();
			});
			$("#logout").on("click",function() {
				$.post("Logout", function(response){
					$("#l_username").val("");
					$("#l_password").val("");
					hideAll();
					blockWithLogin();
					clearInterval(currentIntervalID);
					clearInterval(currentPubIntervalID);
				});
			});
		});
		</script>
		<style>
		html			{ background:#FFFFFF; font-family:Arial, Helvetica, sans-serif; }
		ul li { list-style:none;}
		h1 	{ color : #FFD149; }
		a { cursor: pointer; color : grey;}
		#menu {float:right; position:absolute; top:20px; right:45%; z-index:10; }
		#menu a	  { font-size: 20px; background: rgb(214,229,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(214,229,255,1) 0%, rgba(214,229,255,1) 49%, rgba(178,207,255,1) 53%, rgba(178,207,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,229,255,1)), color-stop(49%,rgba(214,229,255,1)), color-stop(53%,rgba(178,207,255,1)), color-stop(100%,rgba(178,207,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(214,229,255,1) 0%,rgba(214,229,255,1) 49%,rgba(178,207,255,1) 53%,rgba(178,207,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(214,229,255,1) 0%,rgba(214,229,255,1) 49%,rgba(178,207,255,1) 53%,rgba(178,207,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(214,229,255,1) 0%,rgba(214,229,255,1) 49%,rgba(178,207,255,1) 53%,rgba(178,207,255,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(214,229,255,1) 0%,rgba(214,229,255,1) 49%,rgba(178,207,255,1) 53%,rgba(178,207,255,1) 100%); /* W3C */ color:#FFFFFF; border:#B2CFFF 2px solid; text-decoration:none; padding:10px;
						margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
 		#menu a:hover{ background: rgb(165,198,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(165,198,255,1) 1%, rgba(165,198,255,1) 50%, rgba(135,181,255,1) 53%, rgba(135,181,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(165,198,255,1)), color-stop(50%,rgba(165,198,255,1)), color-stop(53%,rgba(135,181,255,1)), color-stop(100%,rgba(135,181,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(165,198,255,1) 1%,rgba(165,198,255,1) 50%,rgba(135,181,255,1) 53%,rgba(135,181,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(165,198,255,1) 1%,rgba(165,198,255,1) 50%,rgba(135,181,255,1) 53%,rgba(135,181,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(165,198,255,1) 1%,rgba(165,198,255,1) 50%,rgba(135,181,255,1) 53%,rgba(135,181,255,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(165,198,255,1) 1%,rgba(165,198,255,1) 50%,rgba(135,181,255,1) 53%,rgba(135,181,255,1) 100%); /* W3C */ color:#FFFFFF; border:#84B3FF 2px solid; text-decoration:none; padding:10px;
						margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
		#menu li			{ float:left; }
		#menu a.selected	{background: rgb(242,207,94); /* Old browsers */
background: -moz-linear-gradient(top, rgba(242,207,94,1) 0%, rgba(255,221,130,1) 0%, rgba(255,221,130,1) 47%, rgba(255,209,73,1) 49%, rgba(255,209,73,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,207,94,1)), color-stop(0%,rgba(255,221,130,1)), color-stop(47%,rgba(255,221,130,1)), color-stop(49%,rgba(255,209,73,1)), color-stop(100%,rgba(255,209,73,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(242,207,94,1) 0%,rgba(255,221,130,1) 0%,rgba(255,221,130,1) 47%,rgba(255,209,73,1) 49%,rgba(255,209,73,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(242,207,94,1) 0%,rgba(255,221,130,1) 0%,rgba(255,221,130,1) 47%,rgba(255,209,73,1) 49%,rgba(255,209,73,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(242,207,94,1) 0%,rgba(255,221,130,1) 0%,rgba(255,221,130,1) 47%,rgba(255,209,73,1) 49%,rgba(255,209,73,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(242,207,94,1) 0%,rgba(255,221,130,1) 0%,rgba(255,221,130,1) 47%,rgba(255,209,73,1) 49%,rgba(255,209,73,1) 100%); /* W3C */; color:#FFF; border:#FFD149 2px solid; text-decoration:none; padding:10px;
						margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
		.box { width:50%; height:100%; float:left;}
		#wrapper	{ width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden; }
		#mask { width:200%; height:100%; }
		.content	{ width:45%; height:80%; top:20%; margin: 0 auto; position:relative; background:rgba(255,255,255, 0.3);
			}
 	/*	#dslist { border-style: none; border-spacing: 0px 2px; }
		#dslist tr td:FIRST-CHILD { -moz-border-radius-topleft: 5px;
	    -moz-border-radius-bottomleft: 5px;
	    -webkit-border-top-left-radius: 5px;
	    -webkit-border-bottom-left-radius: 5px;border-color: #A8A8A8; border-width: medium 0px medium 0px;
	    padding: 5px; }
 		#dslist tr .tdchild { border-width: medium 0px medium 0px; }
	    #dslist tr td:LAST-CHILD { -moz-border-radius-topright: 5px;
	    -moz-border-radius-bottomright: 5px;
	    -webkit-border-top-right-radius: 5px;
	    -webkit-border-bottom-right-radius: 5px;border-color: #A8A8A8; border-width: medium 0px medium 0px;
	    padding: 5px; width : 500px}
		#dslist .userSet { color: white;background-color: #52C954; }
		#dslist .dataSet { color: white;background-color: #CA5854; }
		#dslist .columnHead { color: black;}*/
	
		.panelList { width:100%;border-style: none; border-spacing: 0px 0px; margin : 1px; padding: 4px; }
		.panelList th:FIRST-CHILD {  -moz-border-radius-topleft: 5px;
	    -webkit-border-top-left-radius: 5px;
	     }
	    .panelList th:LAST-CHILD { -moz-border-radius-topright: 5px;
	    -webkit-border-top-right-radius: 5px;
	     }
	     .panelList tr:LAST-CHILD td:FIRST-CHILD { -moz-border-radius-bottomleft: 5px;
	    -webkit-border-bottom-left-radius: 5px;}
	    .panelList tr:LAST-CHILD td:LAST-CHILD { -moz-border-radius-bottomright: 5px;
	    -webkit-border-bottom-right-radius: 5px;}
	    .panelHeading { color :white ;margin: 0px; height: 30px; text-align: center; background: rgb(154,170,183); /* Old browsers */
background: -moz-linear-gradient(top, rgba(154,170,183,1) 0%, rgba(154,170,183,1) 49%, rgba(111,153,186,1) 51%, rgba(111,153,186,1) 90%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(154,170,183,1)), color-stop(49%,rgba(154,170,183,1)), color-stop(51%,rgba(111,153,186,1)), color-stop(90%,rgba(111,153,186,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(154,170,183,1) 0%,rgba(154,170,183,1) 49%,rgba(111,153,186,1) 51%,rgba(111,153,186,1) 90%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(154,170,183,1) 0%,rgba(154,170,183,1) 49%,rgba(111,153,186,1) 51%,rgba(111,153,186,1) 90%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(154,170,183,1) 0%,rgba(154,170,183,1) 49%,rgba(111,153,186,1) 51%,rgba(111,153,186,1) 90%); /* IE10+ */
background: linear-gradient(top, rgba(154,170,183,1) 0%,rgba(154,170,183,1) 49%,rgba(111,153,186,1) 51%,rgba(111,153,186,1) 90%); /* W3C */ /* W3C */ font-size: 30px;-moz-border-radius-topleft: 30px;
	    -webkit-border-top-left-radius: 30px; -moz-border-radius-topright: 30px;
	    -webkit-border-top-right-radius: 30px; padding : 10px;};
	    th.idColumn { width : 20%;}
	    th.nameColumn { width : 60%;}
	    th.statusColumn { width : 20%;}
	    .panelList th { color : white; background-color : #3478AF; padding: 5px;}
	    .panelList tr:not( .columnHead ):hover { background: rgb(203,214,214); /* Old browsers */
background: -moz-linear-gradient(top, rgba(203,214,214,1) 1%, rgba(203,214,214,1) 15%, rgba(168,181,191,1) 85%, rgba(168,181,191,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(203,214,214,1)), color-stop(15%,rgba(203,214,214,1)), color-stop(85%,rgba(168,181,191,1)), color-stop(100%,rgba(168,181,191,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(203,214,214,1) 1%,rgba(203,214,214,1) 15%,rgba(168,181,191,1) 85%,rgba(168,181,191,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(203,214,214,1) 1%,rgba(203,214,214,1) 15%,rgba(168,181,191,1) 85%,rgba(168,181,191,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(203,214,214,1) 1%,rgba(203,214,214,1) 15%,rgba(168,181,191,1) 85%,rgba(168,181,191,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(203,214,214,1) 1%,rgba(203,214,214,1) 15%,rgba(168,181,191,1) 85%,rgba(168,181,191,1) 100%); /* W3C */ color: black; cursor: pointer; }
	    .panelList tr:nth-child(odd) { background-color : #DDDDEE; }
	    .panelList tr:nth-child(even) { background-color : #FFFFFF; }
	    .panelList td { text-align : center; }
		.inner{float:left; width:100%/*560px*/; height:90%; background:rgba(255, 255, 255, 0.3); border-radius:30px; -moz-border-radius:30px;
					border: 2px solid #84B3FF;-webkit-border-radius:30px; margin:5px; padding:2px; top:5px; position:relative; overflow:hidden;}
		.superPanel{float:left; width:50%/*600px*/; height:94%; }
		.kross { cursor:pointer; width: 30px; height: 30px;float:left; background-image: url(kross.png);
		background-repeat:no-repeat; background-color: #B0B0B0; background-size : 100%;}
		.kross:hover { background-color: white;}
		.panel {float:left; width: 88%; height: 91%; border-radius:30px; -moz-border-radius:30px;
					border: 2px solid #84B3FF;-webkit-border-radius:30px; margin:5px; padding:15px; top:5px; position:relative; overflow:hidden;}
		.subPanelHeading { height: 40px; font-size: 32px;color: #3478AF;  }
		.borderHeading { border-bottom :3px solid #3478AF;}
		#mycanvas { z-index: 20;}
		#subDesc { float:left;}
		/*#pubPanel { width: 40%; height : 90%;}*/
		.stats { padding :10px; color: grey; border-spacing: 5px;
		}
		.stats td:first-child { font-weight : bold;}
		#newDataSet { cursor:pointer;padding : 12px;position:absolute;bottom:10px; left:40%; border-radius:30px; -moz-border-radius:30px;text-align : center; color : white; background: rgb(23,165,44); /* Old browsers */
background: -moz-linear-gradient(top, rgba(23,165,44,1) 0%, rgba(23,165,44,1) 49%, rgba(15,150,0,1) 52%, rgba(15,150,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(23,165,44,1)), color-stop(49%,rgba(23,165,44,1)), color-stop(52%,rgba(15,150,0,1)), color-stop(100%,rgba(15,150,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(23,165,44,1) 0%,rgba(23,165,44,1) 49%,rgba(15,150,0,1) 52%,rgba(15,150,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(23,165,44,1) 0%,rgba(23,165,44,1) 49%,rgba(15,150,0,1) 52%,rgba(15,150,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(23,165,44,1) 0%,rgba(23,165,44,1) 49%,rgba(15,150,0,1) 52%,rgba(15,150,0,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(23,165,44,1) 0%,rgba(23,165,44,1) 49%,rgba(15,150,0,1) 52%,rgba(15,150,0,1) 100%); /* W3C */}
		
		#newDataSet:hover {background: rgb(17,224,48); /* Old browsers */
background: -moz-linear-gradient(top, rgba(17,224,48,1) 0%, rgba(17,224,48,1) 49%, rgba(0,211,49,1) 52%, rgba(0,211,49,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(17,224,48,1)), color-stop(49%,rgba(17,224,48,1)), color-stop(52%,rgba(0,211,49,1)), color-stop(100%,rgba(0,211,49,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(17,224,48,1) 0%,rgba(17,224,48,1) 49%,rgba(0,211,49,1) 52%,rgba(0,211,49,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(17,224,48,1) 0%,rgba(17,224,48,1) 49%,rgba(0,211,49,1) 52%,rgba(0,211,49,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(17,224,48,1) 0%,rgba(17,224,48,1) 49%,rgba(0,211,49,1) 52%,rgba(0,211,49,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(17,224,48,1) 0%,rgba(17,224,48,1) 49%,rgba(0,211,49,1) 52%,rgba(0,211,49,1) 100%); /* W3C */
		}
		#suButton { cursor: pointer;padding: 5px;  font-size: 18px;color : white; float: right;border-radius:4px; -moz-border-radius:10px; -webkit-border-radius:10px;}
		.sub {background: rgb(141,232,129); /* Old browsers */
background: -moz-linear-gradient(top, rgba(141,232,129,1) 0%, rgba(141,232,129,1) 49%, rgba(46,234,32,1) 50%, rgba(46,234,32,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(141,232,129,1)), color-stop(49%,rgba(141,232,129,1)), color-stop(50%,rgba(46,234,32,1)), color-stop(100%,rgba(46,234,32,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(141,232,129,1) 0%,rgba(141,232,129,1) 49%,rgba(46,234,32,1) 50%,rgba(46,234,32,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(141,232,129,1) 0%,rgba(141,232,129,1) 49%,rgba(46,234,32,1) 50%,rgba(46,234,32,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(141,232,129,1) 0%,rgba(141,232,129,1) 49%,rgba(46,234,32,1) 50%,rgba(46,234,32,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(141,232,129,1) 0%,rgba(141,232,129,1) 49%,rgba(46,234,32,1) 50%,rgba(46,234,32,1) 100%); /* W3C */border : 2px rgb(141,232,129) solid;}
		
		.sub:hover {background: rgb(93,239,98); /* Old browsers */
background: -moz-linear-gradient(top, rgba(93,239,98,1) 0%, rgba(93,239,98,1) 49%, rgba(2,242,10,1) 50%, rgba(2,242,10,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(93,239,98,1)), color-stop(49%,rgba(93,239,98,1)), color-stop(50%,rgba(2,242,10,1)), color-stop(100%,rgba(2,242,10,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(93,239,98,1) 0%,rgba(93,239,98,1) 49%,rgba(2,242,10,1) 50%,rgba(2,242,10,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(93,239,98,1) 0%,rgba(93,239,98,1) 49%,rgba(2,242,10,1) 50%,rgba(2,242,10,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(93,239,98,1) 0%,rgba(93,239,98,1) 49%,rgba(2,242,10,1) 50%,rgba(2,242,10,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(93,239,98,1) 0%,rgba(93,239,98,1) 49%,rgba(2,242,10,1) 50%,rgba(2,242,10,1) 100%); /* W3C */border : 2px rgb(2,242,10) solid;}
		
		.unsub { background: rgb(234,112,112); /* Old browsers */
background: -moz-linear-gradient(top, rgba(234,112,112,1) 0%, rgba(234,112,112,1) 49%, rgba(214,53,53,1) 51%, rgba(214,53,53,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,112,112,1)), color-stop(49%,rgba(234,112,112,1)), color-stop(51%,rgba(214,53,53,1)), color-stop(100%,rgba(214,53,53,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(234,112,112,1) 0%,rgba(234,112,112,1) 49%,rgba(214,53,53,1) 51%,rgba(214,53,53,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(234,112,112,1) 0%,rgba(234,112,112,1) 49%,rgba(214,53,53,1) 51%,rgba(214,53,53,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(234,112,112,1) 0%,rgba(234,112,112,1) 49%,rgba(214,53,53,1) 51%,rgba(214,53,53,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(234,112,112,1) 0%,rgba(234,112,112,1) 49%,rgba(214,53,53,1) 51%,rgba(214,53,53,1) 100%); border : 2px rgb(234,112,112) solid;/* W3C */}
		
		.unsub:hover {background: rgb(232,76,76); /* Old browsers*/
background: -moz-linear-gradient(top, rgba(232,76,76,1) 0%, rgba(232,76,76,1) 49%, rgba(211,25,25,1) 50%, rgba(211,25,25,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,76,76,1)), color-stop(49%,rgba(232,76,76,1)), color-stop(50%,rgba(211,25,25,1)), color-stop(100%,rgba(211,25,25,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(232,76,76,1) 0%,rgba(232,76,76,1) 49%,rgba(211,25,25,1) 50%,rgba(211,25,25,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(232,76,76,1) 0%,rgba(232,76,76,1) 49%,rgba(211,25,25,1) 50%,rgba(211,25,25,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(232,76,76,1) 0%,rgba(232,76,76,1) 49%,rgba(211,25,25,1) 50%,rgba(211,25,25,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(232,76,76,1) 0%,rgba(232,76,76,1) 49%,rgba(211,25,25,1) 50%,rgba(211,25,25,1) 100%); border : 2px rgb(211,25,25) solid;/* W3C */}
		
		#logo {background-image: url(SAPFeedNew.png); height:110px;width:398px;}
		#logout {z-index:30000;cursor:pointer;position:absolute ; right: 60px; top: 70px;font-size: 20px; background: rgb(214,229,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(214,229,255,1) 0%, rgba(214,229,255,1) 49%, rgba(178,207,255,1) 53%, rgba(178,207,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,229,255,1)), color-stop(49%,rgba(214,229,255,1)), color-stop(53%,rgba(178,207,255,1)), color-stop(100%,rgba(178,207,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(214,229,255,1) 0%,rgba(214,229,255,1) 49%,rgba(178,207,255,1) 53%,rgba(178,207,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(214,229,255,1) 0%,rgba(214,229,255,1) 49%,rgba(178,207,255,1) 53%,rgba(178,207,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(214,229,255,1) 0%,rgba(214,229,255,1) 49%,rgba(178,207,255,1) 53%,rgba(178,207,255,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(214,229,255,1) 0%,rgba(214,229,255,1) 49%,rgba(178,207,255,1) 53%,rgba(178,207,255,1) 100%); /* W3C */ color:#FFFFFF; border:#B2CFFF 2px solid; text-decoration:none; padding:10px;
						margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
		#logout:hover { background: rgb(165,198,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(165,198,255,1) 1%, rgba(165,198,255,1) 50%, rgba(135,181,255,1) 53%, rgba(135,181,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(165,198,255,1)), color-stop(50%,rgba(165,198,255,1)), color-stop(53%,rgba(135,181,255,1)), color-stop(100%,rgba(135,181,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(165,198,255,1) 1%,rgba(165,198,255,1) 50%,rgba(135,181,255,1) 53%,rgba(135,181,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(165,198,255,1) 1%,rgba(165,198,255,1) 50%,rgba(135,181,255,1) 53%,rgba(135,181,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(165,198,255,1) 1%,rgba(165,198,255,1) 50%,rgba(135,181,255,1) 53%,rgba(135,181,255,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(165,198,255,1) 1%,rgba(165,198,255,1) 50%,rgba(135,181,255,1) 53%,rgba(135,181,255,1) 100%); /* W3C */ color:#FFFFFF; border:#84B3FF 2px solid; text-decoration:none; padding:10px;
						margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; }
		</style>
	</head>
	<body>
	
		<div id="header">
	    	<ul id="menu">
	        	<li><a href="#box1" class="link">Subscribers</a></li>
	            <li><a href="#box2" class="link">Publishers</a></li>
	      	</ul>
	      	<br />
	      	<div id="logo"></div>
	      	<a id="logout"> Logout </a>
		</div><!-- end header -->

		<div id="wrapper">
	    	<ul id="mask">
	        	<li id="box1" class="box">
	            	<a name="box1"></a>
	                <div id="subContent" class="content">
	                	<div id="innerSub" class="inner">
	                	
	                		<div class="panelHeading"> Available Data Sets</div>
	                		<table id="dslist" class="panelList"></table>
	                	</div>

	                	<div id="subPanel" class="superPanel">
		                	<div class="panel">
		                		<div class="subPanelHeading">
		                			<div id="subDesc"></div>
		                			<div id="suButton"></div>
		                		</div>
		                		<div class="borderHeading"></div>
		                		
		                		<div class="jScrollbar4">
		                			<div class="jScrollbar_mask">
		                				
		        					</div>
		        					
		        					
		                			<div class="jScrollbar_draggable">
									
									<!-- slider -->
									<a href="#" class="draggable"></a>
									</div>
		                			
		                			<div class="clr"></div>
		                		</div>
		                	</div>
		                	<div id="subK" class="kross"></div>
	                	</div>
	                </div>
	            </li><!-- end box1 -->
	            <li id="box2" class="box">
	            	<a name="box2"></a>
	                <div id="pubContent" class="content">
	                	<div id="innerPub" class="inner">
	                		<div class="panelHeading">Currently Publishing </div>
							<table id="publist" class="panelList"> </table>
							<div id="newDataSet">
								Add DataSet
							</div>
	                	</div>
	                	<div id="pubPanel" class="superPanel">
	                		<div class="panel">
	                			<div id="pubDesc" class="subPanelHeading borderHeading"></div>
	                			<div id="pubCanvas"></div>
	                			<div id="pubSubContent"></div>
	                		</div>
	                		<div id="pubK" class="kross"></div>
	                	</div>
	                </div>
	            </li><!-- end box2 -->
	        </ul><!-- end mask -->
	    </div><!-- end wrapper -->
	    <div id="login">
	    		<h1>Login</h1>
			   <table>
						<tr>
							<td>
								<label> UserID </label>
							</td>
							<td>
								<input id="l_username" type="text" name="username">
							</td>
						</tr>
						<tr>
							<td>
								<label> Password </label>
							</td>
							<td>
								<input id="l_password" type="password" name="password">
							</td>
						</tr>
				</table>
				<input id="submit" type="submit" value="submit">
				<br />
				<br />
				<a id="goToSignUp">Click here to signup!</a>
		</div>
		
		<div id="addDataSet">
			<table>
				<tr>
				<td><label> Name : </label></td>
				<td><input id="dataset_name" type="text" value=""></td>
				</tr>
				<tr>
				<td><label> Description : </label></td>
				<td><textarea id="dataset_desc" type="text" value=""></textarea></td>
				</tr>
			</table>
			<input type="button" value="Create DataSet" id="createDataSet">
			<input type="button" value="Cancel" id="cancelDataSet">
		</div>
		
		<div id="signup">
			<h1>Sign Up</h1>
			<table>
				<tr>
				<td><label> Name </label></td>
				<td><input id="username" type="text" name="username"></td>
				</tr>
				<tr>
				<td><label> Password </label></td>
				<td><input id="p1" type="password" name="password"></td>
				</tr>
				<tr>
				<td><label>Confirm Password </label></td>
				<td><input id="p2" type="password" name="password"></td>
				<tr>
			</table>
			<input id="createUser" type="submit" value="submit">
			<br />
			<br />
			<a id="goToLogin">Login Page</a>
		</div>
		
		<div id="userid">
			<div id="message"></div>
			
			<br />
			<input type="button" value="Ok">
		</div>	
		
		<div id="toolContent">
			<p>Are you sure you want to proceed ? </p>
			<input type="button" id="confirm_ok" class="closeBox" value="OK">
			<input type="button" id="confirm_cancel" class="closeBox" value="Cancel">
		</div>
	</body>
</html>